<template>
  <ul class="nowTime" ref="nowTime">
    <li></li>
    <li></li>
  </ul>
</template>

<script setup lang="ts">
const nowTime = ref<HTMLDivElement | null>(null);
const NowTime = () => nowTime.value as HTMLDivElement;
//获取当前时间
const getNowFormatDate = () => {
  let date = new Date();
  let year: number | string = date.getFullYear();
  let month: number | string = date.getMonth() + 1;
  let strDate: number | string = date.getDate();
  let Hour: number | string = date.getHours(); // 获取当前小时数(0-23)
  let Minute: number | string = date.getMinutes(); // 获取当前分钟数(0-59)
  let Second: number | string = date.getSeconds(); // 获取当前秒数(0-59)
  let show_day = new Array(
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六"
  );
  let day = date.getDay();
  if (Hour < 10) {
    Hour = "0" + Hour;
  }
  if (Minute < 10) {
    Minute = "0" + Minute;
  }
  if (Second < 10) {
    Second = "0" + Second;
  }
  if (month >= 1 && month <= 9) {
    month = "0" + month;
  }
  if (strDate >= 0 && strDate <= 9) {
    strDate = "0" + strDate;
  }
  let currentdate = ` ${year}年${month}月${strDate}号 ${show_day[day]} `;
  let HMS = Hour + ":" + Minute + ":" + Second;
  let temp_time = year + "-" + month + "-" + strDate + " " + HMS;
  NowTime().children[0].innerHTML = HMS;
  NowTime().children[1].innerHTML = currentdate;
  setTimeout(getNowFormatDate, 1000); //每隔1秒重新调用一次该函数
};
onMounted(() => {
  getNowFormatDate();
});
</script>

<style lang="scss" scoped>
.nowTime {
  position: fixed;
  left: 0.4rem;
  top: 0.5375rem;
  display: flex;
  justify-content: center;
  align-items: center;
  li {
    display: inline-block;
    width: 1.625rem;
    height: 0.4375rem;
    font-size: 0.375rem;
    color: #fff;
    float: left;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  li:nth-child(2) {
    font-size: 0.2rem;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
    line-height: .25rem;
    height: .5rem;
    p {
      text-align: center;
    }
  }
}
</style>
